<template>
  <div>

    <div class="maincss">
      <el-row>
        <el-card  >
<!--          <searchBox title='失控处理记录' :btn='btn' @func='showBtn' />-->

          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <div>失控处理记录</div>
            <el-form ref="form" :model="form" class="form" >
              <el-row>
                <el-col :span="6">
                  <el-input
                    placeholder="检验项目"
                    v-model="form.projectName">
                  </el-input>
                </el-col>
                <el-col :span="6">
                  <el-input
                    placeholder="仪器名称"
                    v-model="form.instrumentName">
                  </el-input>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="">
                    <el-date-picker
                      v-model="form.processTime"
                      size="small"
                      style="width: 240px"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择报告生成时间"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <div >
              <el-button type="primary" @click="searchList()">查询</el-button>
              <el-button @click="reset()">重置</el-button>
            </div>

          </el-card>
          <el-card class="gray-card no-border no-margin-top" shadow="never">
          <el-table
            v-loading="loading"
            :data="checkList"
            style="width: 100%;"
            @row-click='detailShow = true'
          >
            <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true" />
            <el-table-column label="仪器名称" align="center" prop="instrumentName" :show-overflow-tooltip="true" />
            <el-table-column label="质控品批号" align="center" prop="batchNo" />
            <el-table-column label="报告人" align="center" prop="inspector" :show-overflow-tooltip="true" />
            <el-table-column label="处理人" align="center" prop="handler" :show-overflow-tooltip="true" />
            <el-table-column label="审核人" align="center" prop="leader" />
            <el-table-column label="失控时间" align="center" prop="createTime" />
            <el-table-column label="报告生成时间" align="center" prop="processTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleOpenDetail(scope.row)"
                  v-hasPermi="['monitor:online:forceLogout']"
                >详情</el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleForceLogout(scope.row)"
                  v-hasPermi="['monitor:online:forceLogout']"
                >下载</el-button>
              </template>
            </el-table-column>
          </el-table>
          </el-card>
          <div class="pagination-container">
            <el-pagination v-show="total>0"
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           layout="total, sizes,prev, pager, next,jumper"
                           :current-page.sync="pageNum"
                           :page-size="pageSize"
                           :page-sizes="[5,10,20,30,50]"
                           :total="total">
            </el-pagination>
          </div>
        </el-card>
      </el-row>
      <el-drawer
            title="记录详情"
            :visible.sync="detailShow"
            size='65%'
            >
            <detail @func='showRegister' ref="detailRef"/>
      </el-drawer>

    </div>
  </div>
</template>

<script>
import detail from "./components/detail";
import { queryOutControlList } from '../../../api/business/outControl'

export default {
  name: "outHandleRecord",
  components:{
    detail
  },
  data() {
    return {
      addShow:false,
      detailShow:false,
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: '1',
      deviceInfo:{},
      status:[],
      inspectionRsult: [],
      value: '',
      total: 5,
      pageNum: 1,
      pageSize: 10,
      form:{
        projectName:null,
        instrumentName:null,
        processTime:null
      }
    };
  },
  watch: {

  },
  created() {
    this.getCheckList()
  },
  methods: {
    showBtn(data){
      if(data=='add'){
          this.addShow = true
      }
    },
    showRegister(){

    },
    getCheckList(){
      this.searchList();
    },
    handleOpenDetail(row) {
      this.detailShow = true
      this.$nextTick(() => {
        this.$refs.detailRef.handleData(row)
      })
    },
    searchList(){
      let data={
        projectName:this.form.projectName,
        instrumentName:this.form.instrumentName,
        processTime:this.form.processTime,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      queryOutControlList(data).then(response=>{
        this.checkList=response.rows;
        this.total=response.total;
      })
    },
    reset(){
      this.form={
        projectName:null,
        instrumentName:null,
        processTime:null
      }
    },
  handleCurrentChange(val){
    this.pageNum = val;
    this.getCheckList();
  },
  handleSizeChange(val){
    this.pageNum = 1;
    this.pageSize = val;
    this.getCheckList();
  }
  }
};
</script>
